{#{% extends 'account/base.html' %}#}
{#{% load static %}#}
{#{% load oauth_tags %}#}
{#{% block title %}#}
{#<title>修改资料</title>#}
{#{% endblock %}#}
{##}
{##}
{#<!--主要内容块-->#}
{#{% block main %}#}
{#<main>#}
{#<div class="container">#}
{#    <div class="row">#}
{#        <div class="col-12 col-sm-8 col-md-6 offset-sm-2 offset-md-3 px-xl-5">#}
{#            <div class="card rounded-0 px-3 px-lg-4">#}
{#                <div class="card-header text-center bg-white py-2"><h3 class="my-1 text-info">修改资料</h3></div>#}
{#                <div class="card-body">#}
{#                    <form class="change_profile" method="post" enctype="multipart/form-data"{% get_user_data request.session.uid as user %} action="/accounts/profile/change/">#}
{#                        <div id="div_id_link" class="form-group">#}
{#                            <label for="id_link" class="form-control-label ">个人网址</label>#}
{#                            <div class="">#}
{#                                <input type="url" name="link" maxlength="200" class="urlinput form-control" id="id_link" />#}
{#                                <small id="hint_id_link" class="text-muted">提示：网址必须填写以http开头的完整形式</small>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div id="div_id_avatar" class="form-group">#}
{#                            <label for="id_avatar" class="form-control-label  requiredField">#}
{#                                头像<span class="asteriskField">*</span>#}
{#                            </label>#}
{#                        <div class="">目前: <a href="/media/{{ user.avatar }}">/media/{{ user.avatar }}</a><br />#}
{#                修改:#}
{#                            <input type="file" name="avatar" class="clearablefileinput" id="id_avatar" />#}
{#                        </div>#}
{#                        </div>#}
{#                        <button class="btn btn-info btn-sm rounded-0" type="submit">更新资料</button>#}
{#                    </form>#}
{#                </div>#}
{#                <div class="text-center mb-5" id="social-login">#}
{#                    <div class="login-title"><span>更多操作</span></div>#}
{#                    <div class="more-link mt-3">#}
{#                        <a class="btn btn-info btn-sm rounded-0 mx-3" href="/accounts/profile/">查看资料</a>#}
{#                        <a class="btn btn-info btn-sm rounded-0 mx-3" href="/">返回首页</a>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#</div>#}
{#</main>#}
{#{% endblock %}#}
{% load static %}
{% load oauth_tags %}
<html lang="en">
<head>
    <style>
        button {
            width: 200px; /*设置按钮宽度*/
            height: 30px; /*设置按钮高度*/
            color: white; /*字体颜色*/
            background-color: #b9def0; /*按钮背景颜色*/
            border-radius: 3px; /*让按钮变得圆滑一点*/
            border-width: 0; /*消去按钮丑的边框*/
            margin: 0;
            outline: none; /*取消轮廓*/
            font-family: KaiTi, serif; /*字体设置为楷体*/
            font-size: 17px; /*设置字体大小*/
            text-align: center; /*字体居中*/
            cursor: pointer; /*设置鼠标箭头手势*/
        }

        button:hover { /*鼠标移动时的颜色变化*/
            background-color: antiquewhite;
        }
    </style>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{% static 'images/picture.ico' %}" type="image/x-icon"/>
    <title>修改资料</title>
    <!-- favicon.ico
      ================================================== -->
    {#    <link rel='shortcut icon' href="/media/avatar/default.png" type="image/x-icon"/>#}

    <link rel="stylesheet" type="text/css" href="">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css' %}" rel="stylesheet">
    <link href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/user_profile.css' %}">
    <link rel="stylesheet" href="{% static 'css/change_profile.css' %}">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700,700i|Josefin+Sans:700" rel="stylesheet">
    {#    <link href="{% static 'Myapp/assets/css/main.css' %}" rel="stylesheet">#}
    {#<link rel="icon" href="{% static 'Myapp/assets/images/logo.png' %}">#}
    {#    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">#}

</head>

<body class="mainbody_change">
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div style="margin:0 auto;width: 750px;height: 400px;border:10px solid #bbe1f1 ;background:#eefaff">
        <div class="row home">
            {#            <div >#}
            {#                <div style="position: relative; top: 40px;left:50px ;width: 200px;height: 200px">#}
            {#                    <img id="avatar_img" src="/media/{{ user.avatar }}" alt="{{ user.username }}" width="200" height="200">#}
            {#                </div>#}
            {#                <!-- avatar -->#}
            {#                <div style="position: relative; top: 100px;left:50px;">#}
            {#                    <button><input type="file" name="avatar" id="avatar" class="btn"></button>#}
            {#                </div>#}
            {#            </div>#}
            <div class="aui-info">
                <img src="/media/{{ request.user.avatar }}" id="avatar_img" width="200" height="200">
{#                <input type="file" accept="image/*" id="avatar" name="file">#}
                  <input type="file" id="avatar" name="avatar">
{#                       onchange="upload('#file-txz', '#img-txz');" class="fileInput" value=""/>#}
            </div>

            <div style="position: relative;top: 70px;left:130px;text-align: center">
                <div>
                    <p class="home-description">
                        账号：<label>
                        <input name="username" type="text" value="{{ user.username }}">
                    </label>
                    </p>
                    <p class="home-description">
                        邮箱：<label>
                        <input name="email" type="text" value="{{ user.email }}">
                    </label>
                    </p>
                    {#                    <p class="home-description">#}
                    {#                        地址：<label>#}
                    {#                        <input name="address" type="text" value="{{ userinfo.address }}">#}
                    {#                    </label>#}
                    {#                    </p>#}
                    {#                    <p class="home-description">#}
                    {#                        简介：<label>#}
                    {#                        <input name="detail" type="text" value="{{ userinfo.detail }}">#}
                    {#                    </label>#}
                    {#                    </p>#}
                </div>
                <p style="position: absolute; left: 130px;top: 220px;" class="center">
                  <input type="button" value="提交" class="btn btn-info" id="sub_change">
                </p>
            </div>
            <a href='{% url 'accounts:profile' %}' class="link_question">&nbsp&nbsp&nbsp&nbsp返回信息卡</a>
        </div>
    </div>

    {#    <script src="{% static 'Myapp/assets/js/script.js' %}"></script>#}
</form>

<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
<script>

    //头像预览功能
    $("#avatar").change(function () {
        var choose_file = $(this)[0].files[0];
        var reader = new FileReader();
        reader.readAsDataURL(choose_file)

        reader.onload = function () {
            $("#avatar_img").attr("src", this.result);
        }
    });

    $("#sub_change").click(function (){
        var formdata = new FormData();
        formdata.append("avatar",$("#avatar")[0].files[0]);
        formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val())
        $.ajax({
            utl:"",
            type:"post",
            contentType:false,
            processData:false,
            data:formdata,
            success:function (data){
                if(data.user){
                    alert('头像更改成功！');
                    location.href = '{% url 'accounts:index' %}';
                }

            }
        })

    })


</script>




</body>
</html>
